<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
    <title>宠物商店管理平台首页测试</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <!-- 引入jQuery -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>
        .mynav {
        }

        .mynav:hover {
            background-color: #9BAEBC;
        }

        .mycenter {
            transform: translateY(20%);
        }
    </style>
</head>

<body>
<!--顶部框-->
<div class="header-container justify-content-center py-3 border-bottom">
    <div class="row">
        <div class="col-lg-9 text-left px-5">
            <a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
                <svg class="bi me-2" width="40" height="32">
                    <image width="40" height="32" xlink:href="/image/back.png"></image>
                </svg>
                <span class="fs-4">宠物商店商户平台</span>
            </a>
        </div>
        <div class="col-lg-3 text-center" >
            <button type="button" th:if="${session.userID}" class="btn btn-outline-primary me-2">登录</button>
            <button type="button" th:if="${session.userID}" class="btn btn-outline-primary">注册</button>
            <button type="button" th:if="${session.userID ne null}" id="btn-logout" class="btn btn-outline-primary">注销</button>
        </div>
    </div>
</div>
<!--顶部框结束-->
<!--页面主体-->
<div class="row" id="flashhtml" th:fragment="flashhtml">
    <!--侧边导航栏-->
    <div class="col-lg-2 bg-dark text-light nav nav-pills flex-column nav-justified"
         style="min-height: 90vh; padding: 0;">
        <div class="my-5" style="padding: 0;">
            <li class="nav-item" style="padding: 0;">
                <a class="nav-link text-light mynav" href="/index" style="padding: 0;">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">首页</div>
                </a>
            </li>
            <li class="nav-item" style="padding: 0;">
                <a class="nav-link text-light mynav" href="/order" style="padding: 0; background-color: #5F788A;">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">订单管理</div>
                </a>
            </li>
            <li class="nav-item" style="padding: 0;">
                <a class="nav-link text-light mynav" href="/itemManage" style="padding: 0; ">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">商品管理</div>
                </a>
            </li>
            <li class="nav-item" th:if="${session.admin}" style="padding: 0;">
                <a class="nav-link text-light mynav" href="/userManage" style="padding: 0;">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">用户管理</div>
                </a>
            </li>
        </div>
    </div>
    <!--侧边导航栏结束-->
    <!--主体部分开始-->
    <div class="col-lg-10" style="background-color: #F3F6F6;">
        <div class="mt-2 text-center bg-light">
            <h3>订单管理</h3>
        </div>
        <!--选项卡开始-->
        <div class="mt-2" style="background-color: white;">
            <!--选项开始-->
            <ul id="tabs" class="nav nav-tabs justify-content-center" role="tablist">
                <li class="nav-item mx-2" role="presentation">
                    <button class="nav-link active" id="nopost-tab" data-bs-toggle="tab" data-bs-target="#nopost"
                            type="button" role="tab" aria-controls="nopost" aria-selected="true">未发货
                    </button>
                </li>
                <li class="nav-item mx-2" role="presentation">
                    <button class="nav-link" id="posted-tab" data-bs-toggle="tab" data-bs-target="#posted"
                            type="button" role="tab" aria-controls="posted" aria-selected="false">已发货
                    </button>
                </li>
                <li class="nav-item mx-2" role="presentation">
                    <button class="nav-link" id="returns-tab" data-bs-toggle="tab" data-bs-target="#returns"
                            type="button" role="tab" aria-controls="returns" aria-selected="false">退货申请
                    </button>
                </li>
            </ul>
            <!--选项结束-->
            <!--选项卡对应页面开始-->
            <div class="tab-content">
                <!--未发货详情页开始-->
                <div class="active fade show tab-pane mt-2" id="nopost">
                    <!--搜索栏开始-->
                    <div class="container-fluid mx-2">
                        <form>
                            <div class="row">
                                <div class="col-3 text-right">
                                    <select class="form-select">
                                        <option>按订单号查询</option>
                                        <option>按商品查询</option>
                                    </select>
                                </div>
                                <div class="col-8 text-center">
                                    <form>
                                        <input type="search" class="form-control" placeholder="搜索">
                                    </form>
                                </div>
                                <div class="col-1 text-left">
                                    <button type="button" class="btn btn-primary">搜索</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--搜索栏结束-->
                    <!--未发货详情卡片区开始-->
                    <div class="container-fluid mt-2">
                        <div class="row">
                            <!--订单列表-->
                            <div class="col-12 border py-3 px-3">
                                <!--订单卡片开始-->
                                <div class="card border rounded-3 border-success mx-3 my-3"
                                     style="width: 15vw; float: left;" th:each="orderList,orderListsStat:${orderList}"
                                     th:if="${orderList.statement} eq '0'">
                                    <!--订单商品的图片-->
                                    <img decoding="async" class="card-img-top"
                                         style="max-width: 15vw; height: 29vh;"
                                         src="../image/birdImage/gezi.jpg">
                                    <!--订单商品的信息-->
                                    <div class="card-body">
                                        <h5 th:text="'订单单号:'+${orderList.orderId}" class="card-title"></h5>
                                        <p th:text="'下单手机:'+${orderList.number}" class="card-text small lh-1"></p>
                                        <p th:text="'客户姓名:'+${orderList.name}" class="card-text small lh-1"></p>
                                        <p th:text="'客户地址:'+${orderList.detail}" class="card-text small lh-1"></p>
                                        <p class="card-text small lh-1">订单状态:未发货</p>
                                        <div class="row px-2">
                                            <div class="col-md-12 text-center">
                                                <a th:href="|orderDetail?orderBelong=${orderList.orderId}|">
                                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal">详情
                                                    </button>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="row px-2">
                                            <div class="col-md-6 text-center">
                                                <button type="button" class="btn btn-info"
                                                        data-bs-toggle="modal" th:attr="data-bs-target='#nopostCard'+${orderList.orderId}">编辑
                                                </button>
                                            </div>
                                            <div class="col-md-6 text-center">
                                                <button  type="button" class="btn btn-success"
                                                          th:attr="cid=${orderList.orderId}"
                                                         onclick="send(this)">发货
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--订单卡片结束-->
                            </div>
                        </div>
                    </div>
                    <!--未发货详情卡片区结束-->
                </div>
                <!--未发货详情页结束-->
                <!--已发货详情页开始-->
                <div class="fade tab-pane mt-2" id="posted">
                    <!--搜索栏开始-->
                    <div class="container-fluid mx-2">
                        <form>
                            <div class="row">
                                <div class="col-3 text-right">
                                    <select class="form-select">
                                        <option>按订单号查询</option>
                                        <option>按商品查询</option>
                                    </select>
                                </div>
                                <div class="col-8 text-center">
                                    <form>
                                        <input type="search" class="form-control" placeholder="搜索">
                                    </form>
                                </div>
                                <div class="col-1 text-left">
                                    <button type="button" class="btn btn-primary">搜索</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--搜索栏结束-->
                    <!--已发货卡片区开始-->
                    <div class="container-fluid mt-2">
                        <div class="row">
                            <!--订单列表-->
                            <div class="col-12 border py-3 px-3">
                                <!--订单卡片开始-->
                                <div class="card border rounded-3 border-success mx-3 my-3"
                                     th:each="orderList,orderStat:${orderList}" th:if="${orderList.statement} eq '1'"
                                     style="width: 15vw; float: left;">
                                    <!--订单商品的图片-->
                                    <img decoding="async" class="card-img-top"
                                         style="max-width: 15vw; height: 29vh;"
                                         src="../image/birdImage/gezi.jpg">
                                    <!--订单商品的信息-->
                                    <div class="card-body">
                                        <h5 th:text="'订单单号:'+${orderList.orderId}" class="card-title"></h5>
                                        <p th:text="'下单手机:'+${orderList.number}" class="card-text small lh-1"></p>
                                        <p th:text="'客户姓名:'+${orderList.name}" class="card-text small lh-1"></p>
                                        <p th:text="'客户地址:'+${orderList.detail}"
                                           class="card-text small lh-1"></p>
                                        <p class="card-text small lh-1">订单状态:已发货</p>
                                        <div class="row px-2">
                                            <div class="col-md-12 text-center">
                                                <a th:href="|orderDetail?orderBelong=${orderList.orderId}|">
                                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal">详情
                                                    </button>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--订单卡片结束-->
                            </div>
                        </div>
                    </div>
                    <!--已发货卡片区结束-->
                </div>
                <!--已发货详情页结束-->
                <!--退款申请详情页开始-->
                <div class="fade tab-pane mt-2" id="returns">
                    <!--搜索栏-->
                    <div class="container-fluid mx-2">
                        <form>
                            <div class="row">
                                <div class="col-md-3 text-right">
                                    <select class="form-select">
                                        <option>按订单号查询</option>
                                        <option>按商品查询</option>
                                    </select>
                                </div>
                                <div class="col-md-8 text-center">
                                    <form>
                                        <input type="search" class="form-control" placeholder="搜索">
                                    </form>
                                </div>
                                <div class="col-md-1 text-left">
                                    <button type="button" class="btn btn-primary">搜索</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--退货申请订单详情-->
                    <div class="container-fluid mt-2">
                        <div class="row">
                            <!--订单列表-->
                            <div class="col-md-12 border py-3 px-3">

                                <!--订单卡片-->
                                <div class="card border rounded-3 border-success mx-3 my-3"
                                     th:each="orderList,orderStat:${orderList}" th:if="${orderList.statement} eq '2'"
                                     style="width: 15vw; float: left;">
                                    <!--订单商品的图片-->
                                    <img decoding="async" class="card-img-top"
                                         style="max-width: 15vw; height: 29vh;"
                                         src="../image/birdImage/gezi.jpg">
                                    <!--订单商品的信息-->
                                    <div class="card-body">
                                        <h5 th:text="'订单单号:'+${orderList.orderId}" class="card-title"></h5>
                                        <p th:text="'下单手机:'+${orderList.number}" class="card-text small lh-1"></p>
                                        <p th:text="'客户姓名:'+${orderList.name}" class="card-text small lh-1"></p>
                                        <p th:text="'客户地址:'+${orderList.detail}"
                                           class="card-text small lh-1"></p>
                                        <p class="card-text small lh-1">订单状态:待处理</p>
                                        <div class="row px-2">
                                            <div class="col-md-12 text-center">
                                               <a th:href="|orderDetail?orderBelong=${orderList.orderId}|">
                                                   <button type="button" class="btn btn-primary" data-bs-toggle="modal">详情
                                                   </button>
                                               </a>
                                            </div>
                                        </div>
                                        <div class="row px-2">
                                            <div class="col-md-6 text-center">
                                                <button type="button" class="btn btn-success"
                                                        th:attr="cid=${orderList.orderId}"
                                                        onclick="agree(this)">同意
                                                </button>
                                            </div>
                                            <div class="col-md-6 text-center">
                                                <button type="button" class="btn btn-danger"
                                                        th:attr="cid=${orderList.orderId}"
                                                        onclick="refuse(this)">拒绝
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                <!--退款申请详情页结束-->
            </div>
            <!--选项卡对应页面结束-->
        </div>
        <!--选项卡结束-->
    </div>
    <!--主体部分结束-->
</div>
<!--页面主体结束-->
<!--模态框组件开始-->
<!--未发货模态框开始-->
<div class="modal"  th:each="orderList,orderListsStat:${orderList}" th:attr="id='nopostCard'+${orderList.orderId}"  data-bs-backdrop="static" >
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">详情</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body">
                <form class="form-horizontal" role="form"   enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">用户名:</label>
                        <div class="col-sm-10">
                            <input name="name" th:value="${orderList.name}"  type="text" class="form-control" id="firstname" placeholder="请输入名字">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="secondname" class="col-sm-2 control-label">用户地址:</label>
                        <div class="col-sm-10">
                            <input name="detail" th:value="${orderList.detail}"  type="text" class="form-control" id="secondname" placeholder="请输入名字">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="thirdname" class="col-sm-2 control-label">用户手机:</label>
                        <div class="col-sm-10">
                            <input name="number" th:value="${orderList.number}"  type="text" class="form-control" id="thirdname" placeholder="请输入名字">
                        </div>
                    </div>
                    <div class="row mt-4 mx-auto px-5">
                        <button type="button" th:attr="id=${orderList.orderId}" onclick="submitform(this)" class="btn btn-success">确定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--未发货模态框结束-->
<!--模态框组件结束-->

<script src="/javascripts/orderScript.js"></script>
</body>

</html>
